import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
import './position.less';
import { history } from 'umi';
import {
  _getObjBoxFishpondDevices,
  _getObjBoxInfo,
  _openOrCloseSwitch,
} from '@/api/sysUser';

export default function Model(props: any) {
  const { info } = props;
  const refEle = useRef(null);
  const [goinObj, setGoinObj] = useState<any>({}); //进水控制箱
  const [putOutObj, setPutOutObj] = useState<any>({}); //尾水控制箱
  const [fishArry, setFishArry] = useState<any>([]); //鱼池
  const [isDlog, setIsDlog] = useState<boolean>(false); //信息框
  const [dlogObj, setDlogObj] = useState<any>([]); //信息框对象
  const [dlogName, setDlogName] = useState<string>(''); //信息框对象
  const [zyj, setZyj] = useState<any>({}); //信息框增氧机对象
  const [isClog, setIsClog] = useState<boolean>(false); //确定框
  const [clogObj, setClogObj] = useState<any>({}); //确定框对象
  const getObjBoxInfo = () => {
    _getObjBoxInfo({ id: 13 }).then((res) => {
      if (res.code == 200) {
        setGoinObj(res.data);
      }
    });
    _getObjBoxInfo({ id: 14 }).then((res) => {
      if (res.code == 200) {
        setPutOutObj(res.data);
      }
    });
  };
  const getObjBoxFishpondDevices = () => {
    const rightIcon = [
      '12-s17',
      '11-s17',
      '10-s17',
      '9-s17',
      '8-s16',
      '8-s17',
      '7-s16',
      '7-s17',
      '5-s17',
    ];
    _getObjBoxFishpondDevices({
      baseId: history.location.query?.baseId || 1,
      companyId: history.location.query?.companyId || 1,
    }).then((res) => {
      if (res.code == 200) {
        const newItems = res.data.map((item: any) => {
          const nItems = item.valveList.map((i: any) => {
            const str = `${item.id}-${i.attributeCode}`;
            return {
              ...i,
              left: rightIcon.includes(str),
            };
          });
          return {
            ...item,
            valveList: nItems,
          };
        });
        setFishArry(newItems);
      }
    });
  };
  useEffect(() => {
    getObjBoxInfo();
    getObjBoxFishpondDevices();
    let timer: any = setInterval(() => {
      getObjBoxFishpondDevices();
    }, 6000);
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, []);
  const kgState = (ite: any) => {
    return (
      <>
        {!ite.left && ite.deviceStatus == 1 ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/l1.png')}
            alt=""
          />
        ) : null}
        {!ite.left && (ite.deviceStatus == 0 || ite.deviceStatus == 2) ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/l2.png')}
            alt=""
          />
        ) : null}
        {!ite.left && ite.deviceStatus == 3 ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/l3.png')}
            alt=""
          />
        ) : null}
        {ite.left && ite.deviceStatus == 1 ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/r1.png')}
            alt=""
          />
        ) : null}
        {ite.left && (ite.deviceStatus == 0 || ite.deviceStatus == 2) ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/r2.png')}
            alt=""
          />
        ) : null}
        {ite.left && ite.deviceStatus == 3 ? (
          <img
            className={styles.kgimgs}
            src={require('@/assets/r3.png')}
            alt=""
          />
        ) : null}
      </>
    );
  };
  return (
    <div className={styles.modelC}>
      <div style={{ scale: 0.5, position: 'relative' }}>
        <img className={styles.bgImg} src={require('@/assets/bg.jpg')} alt="" />
        <div>
          {fishArry?.map((item: any) => (
            <div key={item.id}>
              <div className="valveListBox">
                {item.valveList?.map((ite: any) => (
                  <div key={ite.attributeCode}>
                    {ite.fishpondList?.map((it: any) => (
                      <div key={it.fishpondName}>
                        <div className={`kzxList kzxList${item.id}`}>
                          <img
                            style={{ width: 34 / 3.5, height: 47 / 3.5 }}
                            className="greenBox"
                            src={require('@/assets/greenBox.png')}
                            alt=""
                          />
                        </div>
                        <div
                          className={`valveListBoxItems valveListBoxItems${item.id}${ite.attributeCode}`}
                        >
                          {kgState(ite)}
                        </div>
                        <div
                          key={it.fishpondName}
                          className={`fishpondListItems fishpondListItemss${it.fishpondName}`}
                        >
                          <img
                            className={styles.fishC}
                            src={require('@/assets/yuchiA.png')}
                            alt=""
                          />
                          <div className="fishpondNames">
                            {it.switchList[0].deviceStatus == 1 ? (
                              <img
                                className="fishpondNamesImg"
                                src={require('@/assets/yc.gif')}
                                alt=""
                              />
                            ) : (
                              <img
                                className="fishpondNamesImg"
                                src={require('@/assets/zyj.png')}
                                alt=""
                              />
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          ))}
          {/* 尾水控制箱 */}
          <img
            className={styles.outs}
            src={require('@/assets/greenBox.png')}
            alt=""
          />
          {/* 进水控制箱 */}
          <img
            className={styles.ins}
            src={require('@/assets/greenBox.png')}
            alt=""
          />
        </div>
      </div>
    </div>
  );
}
